<template>
  <el-dialog title="修改新闻信息" :visible.sync="dialogVisible" width="40%">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" >
      <el-form-item label="新闻标题" prop="name">
        <el-input placeholder="" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="新闻作者" prop="writer">
        <el-input placeholder="" v-model="form.writer"></el-input>
      </el-form-item>
      <el-form-item label="新闻摘要" prop="outline">
        <el-input placeholder="" v-model="form.outline"></el-input>
      </el-form-item>
      <el-form-item label="新闻缩略图" prop="">
        <el-input placeholder="" v-model="form.picture"></el-input>
      </el-form-item>
      <el-form-item label="新闻类型" >
        <el-col :span="20">
          <el-checkbox-group v-model="form.newsTypeid">
            <el-checkbox v-for="newsType in newsTypeList" :label="newsType.id" :key="newsType.id">
              {{newsType.name}}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>

      </el-form-item>
      <el-form-item label="是否在前台显示" prop="state" label-width="130px">
        <el-col :span="16">
          <el-radio v-model="form.state" :label="1">显示类型</el-radio>
          <el-radio v-model="form.state" :label="0">隐藏类型</el-radio></el-col>
      </el-form-item>



    </el-form>
    <span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save('form')">保存</el-button>
		</span>
  </el-dialog>
</template>

<script>
export default {
  name: "Add",
  data() {
    return {
      dialogVisible: false,
      newsTypeList: [],
      form: {
        id:'',
        name: '',
        writer:'',
        outline:'',
        picture:'',
        state:'',
        newsTypeid:[]
      },
      flag:true,
      rules: {
        name: [{
          required: true,
          message: '请输入的新闻标题！',
          trigger: 'blur'
        },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
        ],
        writer: [{
          required: true,
          message: '请输入的新闻作者！',
          trigger: 'blur'
        },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur'
          }
        ],
        outline: [{
          required: true,
          message: '请输入的新闻摘要！',
          trigger: 'blur'
        },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
        ],
        state: [{
          required: true,
          message: '请选择新闻类型是否在前台显示！',
          trigger: 'blur'
        }
        ]
      },
    }
  },
  methods: {
    findNewsById(id){
      this.$http.get("admin/NewsCtl/findNewsById?id="+id).then((resp) => {
        this.form=resp.data.data;
      })
    },

    save(reffrom) {
      //数据向后端发送进行验证
      //$refs是一个引用

      this.$refs[reffrom].validate((valid) => {
        if (valid) {
          //如果发送成功，跳转到其他组件
          //【跳转语句】
          this.$http.post("admin/NewsCtl/saveNews", this.form).then((resp) => {
            if (resp.data.code == 200) {
              this.$message({
                showClose: true,
                message: '恭喜你，修改成功✔',
                type: 'success'
              });
              this.$router.go();
            }
          })
        }
      });

    }
  },
  mounted() {
    this.$http.get("admin/NewsCtl/findNewsTypeList").then((res) => {
      if (res.data.code == 200) {
        this.newsTypeList = res.data.data;
      }
    })
  }
}
</script>